<template>
	<view class="container" :class="skinStyle">
		<view class="ucharts-box">
			<!-- <view class="ucharts-title"><text v-if="profitTab===0">收益</text><text v-if="profitTab===1">提现</text>对比</view> -->
			
			<canvas canvas-id="canvasLine" id="canvasLine" class="charts" @touchstart="touchLineA"></canvas>
			<!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" v-if="dateTab==1"></canvas> -->

			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="99999"   >
				<view id="demo1" class="scroll-view-item_H uni-bg-red" >
					<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{width:cWidth+'px'}" class="chartsC"></canvas>
				<!-- <canvas canvas-id="canvasColumn" id="canvasColumn" :style="{width:cWidth+'px'}" class="charts" @touchstart="touchColumn"></canvas> -->
				</view>
			</scroll-view>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	// import uCharts from '@/components/u-charts/u-charts.js';
	import uCharts from  '@/packageC/static/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	var canvaLine = null;

	import mixin from "@/utils/mixin.js"
	export default {
		mixins:[mixin],
		data() {
			return {
				
				profit: 12,
				scrollLeft: 0,
				dateTab: 0,
				profitTab: 0,
				scrollTop: 180,
				tabs: [{
					name: "日账单"
				}, {
					name: "月账单"
				}],
				tab: [{
					name: "收益"
				}, {
					name: "提现"
				}],
				cWidth: '',
				cHeight: '',
				lWidth: '',
				lHeight: '',
				pixelRatio: 1,
				serverData: '',
				date: '2020-03',
				flag: 0,
				text: '',
				lastX: 0,
				lastY: 0,
				Column: {},
				profitLine:{
					categories:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',
								'15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27','28','29','30'],
					data:[25, 20, 25, 14, 34, 18, 15, 12, 14, 25, 20, 25, 14, 34, 18, 15, 12, 14, 25, 20, 25, 14, 34, 18, 15,
									12, 14
					],
					month:'2020-03',
				},
				profitBarS:{
					categories:[],
					data:[],
					month:'2020-03',
				},
				profitBarT:{
					categories:[],
					data:[],
					month:'2020-03',
				},
				brokerageAmount:'',//	总收益金额	String
				cashOutAmount:'',  //	总提现金额	String
				brokerageCount:0,	//总收益笔数	Number
				cashOutCount:0,
				brokerageAmountSum:'',	//总收益金额	String
				cashOutAmountSum:'',
				chartData:{
						categories: ['2012', '2013', '2014', '2015', '2016', '2017', '2025', '2026', '2027'],
						series: [{
							name: '成交量A',
							data: [35, 20, 25, 37, 4, 20, 37, 4, 20],
							color: '#000000'
						}, {
							name: '成交量B',
							data: [70, 40, 65, 100, 44, 68, 37, 4, 20]
						}, {
							name: '成交量C',
							data: [100, 80, 95, 150, 112, 132, 37, 4, 20]
						}]
					},
			};
		},
		onLoad(options) {
			// this.date='2020-04'
			
			this.date=options.date
			// this.getMonthSum(this.date)
			// this.accountJournalListByMonth();
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.lWidth = uni.upx2px(750);
			this.lHeight = uni.upx2px(500);
			
			// this.getServerData('line','#7fe2d4');
			// this.accountJournalListByDay(0,this.date)
			let Column={categories:[],series:[]};
			Column.categories=this.chartData.categories
			Column.series = this.chartData.series
			// Column.series[0]={
			// 	name: '',
			// 	data: this.chartData.series,
			// 	// color: '#000000'
			// }
			this.showColumn("canvasColumn",Column)
			
		},
		onReady() {
			//this.getServerData();
		},
		methods: {
			//获取日统计的总共天数
			getMonthSum(date){
				this.profitLine.categories=[]
				var date=date.split("-");
				var year=date[0];
				var m=date[1]
				console.log(m)
				var mArr;
				if(year%4===0){
					mArr=[31,29,31,30,31,30,31,31,30,31,30,31]
				}else{
					mArr=[31,28,31,30,31,30,31,31,30,31,30,31]
				}
				console.log(mArr)
				console.log(mArr[m-1])
				var a=[];
				for(var i=0;i<mArr[m-1];i++){
					this.profitLine.categories.push(i+1)
				}
				// console.log(a)
			},
			
			// 账户明细月统计
			accountJournalListByMonth(){
				// this.$http.accountJournalListByMonth().then((res) => {
				// 	var data=[]
				//   if (res.success) {
				// 	console.log(res.data);
				// 	// this.profitBar=res.data.brokerageData;
				// 	this.brokerageAmountSum=res.data.brokerageAmount;	//总收益金额	String
				// 	this.cashOutAmountSum=res.data.cashOutAmount;
				// 	data=res.data;
				// 	// for(var i=0;i<data.brokerageData.length;i++){
				// 	// 	this.profitBarS.categories.push(data.brokerageData[i].yearMonth);
				// 	// 	this.profitBarS.data.push(Number(data.brokerageData[i].amount));
				// 	// 	this.profitBarT.categories.push(data.cashOutData[i].yearMonth);
				// 	// 	this.profitBarT.data.push(Number(data.cashOutData[i].amount));
				// 	// }
				// 	for(var k in data.brokerageData){
				// 		this.profitBarS.categories.push(k);
				// 		this.profitBarS.data.push(Number(data.brokerageData[k]));
				// 	}
				// 	for(var k in data.cashOutData){
				// 		this.profitBarT.categories.push(k);
				// 		this.profitBarT.data.push(Math.abs(Number(data.cashOutData[k])));
				// 	}    
					
				//   }
				// });
			},
			// 账户明细日统计
			accountJournalListByDay(flg,data){
				const param={
					searchDate:data,
				}
				console.log(this.data);
				// this.$http.accountJournalListByDay(param).then((res) => {
				// 	var data=[]
				//   if (res.success) {
				// 	console.log(res.data);
				// 	data=res.data;
				// 	var lineDataS=[]
				// 	var lineDataT=[]
				// 	this.brokerageAmount=res.data.brokerageAmount;//	总收益金额	String
				// 	this.cashOutAmount=res.data.cashOutAmount;  //	总提现金额	String
				// 	this.brokerageCount=res.data.brokerageCount;	//总收益笔数	Number
				// 	this.cashOutCount=res.data.cashOutCount;
				// 	// for(var i=0;i<data.brokerageData.length;i++){
				// 	// 	lineDataS.push(Number(data.brokerageData[i].amount))
				// 	// 	lineDataT.push(Number(data.cashOutData[i].amount))
				// 	// }
				// 	console.log(data.brokerageData)
				// 	for(var k in data.brokerageData){
				// 		lineDataS.push(Number(data.brokerageData[k]));
				// 	}  
				// 	for(var k in data.cashOutData){
				// 		lineDataT.push(Math.abs(Number(data.cashOutData[k])));
				// 	}  
				// 	if(flg===0){
				// 		this.getServerData('line','#7fe2d4',lineDataS);
				// 	}else{
				// 		this.getServerData('line','#df6a6a',lineDataT);
				// 	}
					
					
				//   }
				// });
			},
			
			
			
			bindDateChange: function(e) {
				this.date = e.target.value;
				console.log(e.target.value);
				this.getMonthSum(this.date)
				this.accountJournalListByDay(this.profitTab,this.date);
			},
			swichMenu: async function(current) { //点击其中一个 tab
				if (this.dateTab == current) {
					return false;
				} else {
					this.profitTab = 0
					this.dateTab = current;
					this.setScrollLeft(current);
					if (current === 0) {//日统计
						// this.getServerData('line','#7fe2d4');
						this.accountJournalListByDay(this.profitTab,this.date);
					} else if (current === 1) {//月统计
						this.getServerData('column','#7fe2d4',this.profitBarS)
					} 
				}
			},
			profitMenu: async function(current) { //点击其中一个 tab
				if (this.profitTab == current) {
					return false;
				} else {
					this.profitTab = current;
					this.setScrollLeft(current);
					// console.log(current);
					if (this.dateTab === 0) {
						if (current === 0) {
							this.accountJournalListByDay(0,this.date)
							// this.getServerData('line','#7fe2d4');
						} else if (current === 1) {
							this.accountJournalListByDay(1,this.date)
						}
					} else if (this.dateTab === 1) {//月统计
						if (current === 0) {
							this.getServerData('column','#7fe2d4',this.profitBarS)
						} else if (current === 1) {
							this.getServerData('column','#df6a6a',this.profitBarT)
						}
					}

				}
			},

			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},

			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},

			getServerData(type,color,data) {
				if(type=="line"){
					let Line = {
						categories:this.profitLine.categories,
						series: [{
							color: color,
							"name": this.date,
							"data": data,
						}]
					}
					_self.showLine("canvasLine", Line);
				}else if(type=="column"){
					// this.accountJournalListByMonth(this.profitTab)
					console.log(data)
					let Column = {
						categories: data.categories,
						series: [{
							color: color,
							"name": data.month,
							"data": data.data,
						}]
					}
					
					// let Column={categories:[],series:[]};
					// this.chartData = res.data
					// Column.categories=this.chartData.goodsName
					// Column.series[0]={
					// 	name: '',
					// 	data: this.chartData.amount,
					// 	// color: '#000000'
					// }
					// this.showColumn("canvasColumn",Column)
					_self.showColumn("canvasColumn", Column);
				}
			},
			
			
			showColumn(canvasId, chartData) {
				var num = chartData.categories.length;
				console.log(num);
				this.cWidth = uni.upx2px(num * 125)
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false,
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						disabled: true,
						  disableGrid: false,
						  gridType:'dash',
						  splitNumber: 5,
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: 20
						}
					}
				});

			},
			showLine(canvasId, chartData) {
				canvaLine = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position:'top'
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid:true,
						labelCount:7
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						gridType:'dash',
						dashLength: 8,
						splitNumber: 5,
						// min: 10,
						// max: 100,
						format:(val)=>{return val.toFixed(0)+'元'}
					},
					width: this.lWidth,
					height: this.cHeight,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				canvaLine.showToolTip(e, {
					format: function (item, category) {
						return category + '日 ：' + item.data +'元'
					},
					background:'#13c1a8'
				});
			},
			touchColumn(e) {
				// console.log(e);
				var data = '';
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' :￥' + item.data
					}
				});
			},
			touchColumA(e) {
				canvaColumn.scrollStart(e);
			},
			moveLineA(e) {
				canvaColumn.scroll(e);
				this.aaa()
			},
			touchEndLineA(e) {
				canvaColumn.scrollEnd(e);
			},
			scroll: function(e) {
				console.log(e.detail.scrollLeft);
			},

		}
	}
</script>

<style lang="scss">
	
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
		height: 100%;
		width: 100%;
		background: #fff;
	}
	.static-top{
		height: 440rpx;
		background-color: #13C1A8;
	}
	.monthDayTab {
		height: 90rpx;
		width: 100%;
		padding:0 20%;
		box-sizing: border-box;
	}

	.top-tabs-view {
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		.tabs-item-wrap {
			display: inline-block;
			white-space: nowrap;
			height: 100%;
			width: 50%;
			.tabs-item {
				margin-left: 40rpx;
				margin-right: 40rpx;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.tabs-item-txt {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #fff;
					opacity: 0.6;
				}

				.tabs-item-bottom {
					position: absolute;
					bottom: 8rpx;
					width: 100%;
					height: 4rpx;
				}
			}

			.tabs-item-act {
				.tabs-item-txt {
					color: #ffffff;
					opacity:1;
				}

				.tabs-item-bottom {
					background: #ffffff!important;
				}
			}
		}
	}

	.dateprofit {
		width: 100%;
		display: flex;
		align-items: center;
		margin:40rpx 0 44rpx;
		height: 52rpx;
		.statisticsDate {
			width: 50%;
			padding-left: 30rpx;
			box-sizing: border-box;
			.pickerBox {
				padding: 10rpx 0rpx;
				font-size: 30rpx;
				color:#fff;
				.iconfont{
					vertical-align: middle;
					font-size: 28rpx;
					margin-left:6rpx;
				}
			}
		}

		.profitTab {
			width: 50%;
			display: flex;
			justify-content: flex-end;
			.profitTab-item-wrap {
				border-radius: 40rpx;
				padding: 4rpx 30rpx;
				margin-right: 30rpx;
				color: #fff;
				opacity: 0.6;
				font-size: 28rpx;
				border: 1px solid transparent;
			}
			.profitTab-item-act {
				border: 1px solid #fff;
				opacity:1;
			}
		}
	}
	.profitSum{
		width: 100%;
		padding:0 30rpx;
		box-sizing: border-box;
		color: #fff;
		.profitSumTitle{
			font-size: 26rpx;
		}
		.profitSumNumber{
			line-height: 120rpx;
			margin-bottom: 40rpx;
			.small{
				font-size:44rpx;
			}
			.big{
				font-size:60rpx;
			}
		}
	}
	.ucharts-box {
		width: 100%;
		margin-top: -20rpx;
		padding-top: 40rpx;
		border-radius: 20rpx;
		background: #fff;
		padding-top:50rpx;
		.ucharts-title{
			padding-left:30rpx;
			font-size: 30rpx;
			color:#333;
			margin-bottom:60rpx;
			
		}
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
		display: inline-block;
	}
	.chartsC{
		// width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
		display: inline-block;
	}

	.scrollBox {}



	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		overflow-x: scroll;
	}

	.scroll-view-item_H {
		display: inline-block;

	}

	.uni-bg-blue {
		width: 100%;
	}
</style>

<!-- 	handletouchmove: function(event) {
				console.log(event)
				if (this.flag !== 0) {
					return;
				}
				let currentX = event.touches[0].pageX;
				let currentY = event.touches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				this.mindex = -1;
				//左右方向滑动
				if (Math.abs(tx) > Math.abs(ty)) {
					if (tx < 0) {
						text = '向左滑动';
						this.flag = 1;
						//  this.getList();  //调用列表的方法
					} else if (tx > 0) {
						text = '向右滑动';
						this.flag = 2;
					}
				}
				//上下方向滑动
				else {
					if (ty < 0) {
						text = '向上滑动';
						this.flag = 3;
						//  this.getList();  //调用列表的方法
					} else if (ty > 0) {
						text = '向下滑动';
						this.flag = 4;
					}
				}

				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
			},
			handletouchstart: function(event) {
				console.log(event)
				this.lastX = event.touches[0].pageX;
				this.lastY = event.touches[0].pageY;
			},
			handletouchend: function(event) {
				this.flag = 0;
				this.text = '没有滑动';
			}, -->
